import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { uniqueId } from 'lodash';
import { OptionItem } from '@iux/live';

@Component({
  selector: 'app-demo3',
  templateUrl: './multiple.component.html',
  styles: [],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MultipleComponent implements OnInit {
  data: OptionItem[];
  value: OptionItem[];

  maxTagData: OptionItem[];
  selectVal: OptionItem[];
  selectValWrap:OptionItem[];

  constructor() {}

  ngOnInit() {
    this.initData();
  }

  initData() {
    const suffix = 'very long,very long,very long,very long,very long,very long,very long,very long,';

    this.data = Array.from({ length: 10 }).map((item, key) => this.initUser(key, key % 2 !== 0, suffix));
    this.value = [this.data[1], this.data[2]];

    this.maxTagData = Array.from({ length: 15 }).map((item, key) => this.initUser(key));
    this.selectVal = [this.maxTagData[1]];
    this.selectValWrap = [this.maxTagData[1]];
  }

  initUser(key: number, disabled?: boolean, suffix?: string) {
    return {
      id: uniqueId('uid'),
      label: suffix ? `user${key}:${suffix}` : `user${key}`,
      age: 10 + key,
      expand: false,
      random: parseInt(`${Math.random() * 100  }`, 10),
      disabled,
      isLeaf: true,
    };
  }

  change(value) {
    console.log('change', value);
  }
}
